<template>
  <div style="padding: 0 5px">
    <h4>{{photoDetail.title}}</h4>
    <p>
      <span class="time">发表时间：{{photoDetail.add_time | formatDate}}</span>
      <span class="click">点击：{{photoDetail.click}}</span>
    </p>
    <hr />
    <ul>
      <li @click="preview(i)" v-for="(item,i) in photoArray" :key="i">
        <img :src="item.src" alt />
      </li>
    </ul>
    <div v-html="photoDetail.content"></div>

    <!-- 评论区 -->
    <h3>发表评论</h3>
    <hr />
    <van-cell-group>
      <van-field v-model="content" type="textarea" placeholder="请输入留言" row="1" autosize />
      <van-button type="info" @click="addComment">发表评论</van-button>
    </van-cell-group>
    <van-list v-for="(item,i) in commentsList" :key="i">
      <div class="title">
        <span>第{{i+1}}楼</span>
        <span>用户：{{item.user_name}}</span>
        <span>发表时间：{{item.add_time | formatDate()}}</span>
      </div>
      <div class="text">{{item.content}}</div>
    </van-list>
    <!-- 加载更多 -->

    <van-button type="danger" @click="loadmore">加载更多</van-button>
  </div>
</template>

<script>
import { ImagePreview } from "vant";
export default {
  data() {
    return {
      //获取图片详情页面中的详细描述信息
      photoDetail: {},
      //获取图片详情页面上部的图片列表数据
      photoArray: [],
      id: 0,

      //评论区
      commentsList: [],
      content: "",
      pageSize: 1
    };
  },
  methods: {
    //获取图片详情页面中的详细描述信息
    async getPhotoDetail() {
      const { data: res } = await this.$http.get(
        "/api/getimageInfo/" + this.$route.params.id
      );
      console.log(res);
      if (res.status !== 0) {
        return this.$toast("服务器获取失败");
      }
      this.photoDetail = res.message[0];
    },

    //获取图片详情页面上部的图片列表数据
    async getPhotoArray() {
      const { data: res } = await this.$http.get(
        "/api/getthumimages/" + this.$route.params.id
      );
      console.log(res);
      if (res.status !== 0) return this.$toast("服务器异常");
      this.photoArray = res.message;
    },
    //预览图片
    preview(i) {
      console.log(i);
      const arr = [];
      this.photoArray.forEach(item => {
        arr.push(item.src);
      });
      ImagePreview({
        images: arr,
        startPosition: i,
        onClose() {
          // do something
        }
      });
    },

    //评论区
    async getComments() {
      const { data: res } = await this.$http.get(
        "/api/getcomments/" + this.id + "?pageindex=" + this.pageSize
      );
      console.log(res);
      if (res.status !== 0) return this.$toast("服务器异常");
      this.commentsList = res.message;
    },
    async loadmore() {
      this.pageSize++;
      const { data: res } = await this.$http.get(
        "/api/getcomments/" + this.id + "?pageindex=" + this.pageSize
      );
      if (res.status !== 0) return this.$toast("服务器异常");
      this.commentsList.push(...res.message);
    },
    async addComment() {
      if (this.content.trim() == "") return this.$toast("留言不能为空");
      const { data: res } = await this.$http.post(
        "/api/postcomment/" + this.id,
        { content: this.content }
      );
      console.log(res);
      if (res.status != 0) {
        return this.$toast("请求服务器失败");
      }
      this.$toast("评论成功");
      this.content = "";
      this.getComments();
    }
  },
  created() {
    this.getPhotoDetail(),
      this.getPhotoArray(),
      //评论区
      this.getComments();
  }
};
</script>

<style lang="less" scoped>
h4 {
  text-align: center;
  font-size: 15px;
  color: #26a2ff;
}
p {
  overflow: hidden;
}
.time {
  font-size: 13px;
  color: #8f8f94;
  float: left;
}
.click {
  font-size: 13px;
  color: #8f8f94;
  float: right;
}
ul {
  list-style: none;
  margin: 10px 0;
  padding: 0 5px;
  overflow: hidden;
  li {
    width: 33.3333%;
    padding: 5px;
    float: left;
    box-sizing: border-box;
    img {
      width: 100%;
      box-shadow: 1px 0 8px 1px rgba(0, 0, 0, 0.3);
    }
  }
}

// 评论区
.van-field {
  height: 100px;
  border: 1px solid #ccc;
}
.van-button {
  width: 100%;
  margin: 5px 0;
}
.title {
  height: 30px;
  line-height: 30px;
  background-color: #ccc;
  font-style: 12px;
  span {
    margin-right: 6px;
  }
}
.text {
  //首行缩进
  text-indent: 2em;
  font-style: 12px;
  line-height: 35px;
}
</style>